<script setup lang="ts">
import { reactive, ref } from 'vue';
import FileSource = Api.Common.FileSource;

interface Props {
  classList: Api.Train.Classes[];
}
defineProps<Props>();

const formRef = ref();
const state = reactive({
  ruleForm: {
    id: '',
    name: '',
    classId: null,
    telephone: '',
    entryDate: null as number,
    photo: '',
    sex: null as number
  },
  rules: {
    name: {
      required: true, message: '请输入学生姓名', trigger: ['blur']
    },
  },
  source: {} as FileSource
});

const handleChange = (source: FileSource) => {
  state.source = source;
  state.ruleForm.photo = source.id;
};
defineExpose({
  state,
  formRef
});
</script>

<template>
  <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
    <n-grid responsive="screen" item-responsive>
      <n-form-item-gi span="24" label="学生姓名" path="name">
        <n-input v-model:value="state.ruleForm.name" placeholder="请输入学生姓名" clearable></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="所属班级" path="classId">
        <n-select v-model:value="state.ruleForm.classId" :options="classList" label-field="name" value-field="id" placeholder="请选择班级" clearable></n-select>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="联系电话" path="telephone">
        <n-input v-model:value="state.ruleForm.telephone" placeholder="请输入联系电话" clearable></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="入学日期" path="entryDate">
        <n-date-picker class="w-100%" v-model:value="state.ruleForm.entryDate" type="date" placeholder="请选择入学日期" clearable></n-date-picker>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="性别" path="sex">
        <n-radio-group v-model:value="state.ruleForm.sex">
          <n-radio :value="1">男</n-radio>
          <n-radio :value="2">女</n-radio>
        </n-radio-group>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="照片" path="photo">
        <CommonUploadImg :source="state.source" module-name="student" accept-file=".jpg,.png,.jpeg" :max="1" @change="handleChange" />
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<style scoped>

</style>
